<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>幸运大转盘</title>
		<%@include file="/common/header.jsp" %>			
		<script type="text/javascript" src="${basePath }js/jquery.rotate.min.js"></script>
		<style>
			.rotary { position: relative; width: 854px; height: 504px; margin: 0 auto; background: #d71f2e url(${basePath}img/bg1.png);}
			.rotaryArrow { position: absolute; left: 181px; top: 104px; width: 294px; height: 294px; cursor: pointer; background-image: url(${basePath}img/arrow.png);}
			.list { position: absolute; right: 48px; top: 144px; width: 120px; height: 320px; overflow: hidden;}
			.list h3 { display: none;}
			.list ul { list-style-type: none;}
			.list li { height: 37px; font: 14px/37px "Microsoft Yahei"; color: #ffea76; text-indent: 25px; background: url(${basePath}img/user.png) 0 no-repeat;}
			.result { display: none; position: absolute; left: 130px; top: 190px; width: 395px; height: 118px; background-color: rgba(0,0,0,0.75); filter: alpha(opacity=90);}
			.result a { position: absolute; right: 5px; top: 5px; width: 25px; height: 25px; text-indent: -100px; background-image: url(${basePath}img/close.png); overflow: hidden;}
			.result p { padding: 45px 15px 0; font: 16px "Microsoft Yahei"; color: #fff; text-align: center;}
			.result em { color: #ffea76; font-style: normal;}
		</style>
	</head>
	<body>
		<%@include file="/common/top.jsp" %>		

		<!-- Demo start  -->
	<div class="rotary">
		<div class="rotaryArrow" id="rotaryArrow"></div>
		<div class="list">
			<h3>中奖名单</h3>
			<ul>
				<li>1569****851</li>
				<li>1569****851</li>
				<li>1515****206</li>
				<li>1550****789</li>
				<li>1370****627</li>
				<li>1828****215</li>
				<li>1589****572</li>
				<li>1583****825</li>
				<li>1396****805</li>
				<li>1332****261</li>
				<li>1884****863</li>
				<li>1384****955</li>
				<li>1897****137</li>
				<li>1342****973</li>
				<li>1558****071</li>
				<li>1554****168</li>
				<li>1562****018</li>
				<li>1805****856</li>
				<li>1354****809</li>
				<li>1383****364</li>
			</ul>
		</div>
		<div class="result" id="result">
			<p id="resultTxt"></p>
			<a href="javascript:" id="resultBtn" title="关闭">关闭</a>
		</div>
	</div>
	<!-- Demo end -->
	
	<script>
		$(function(){
			var $rotaryArrow = $('#rotaryArrow');
			var $result = $('#result');
			var $resultTxt = $('#resultTxt');
			var $resultBtn = $('#result');
			rotateCount = 3;
			$rotaryArrow.click(function(){
				
				
				if(rotateCount > 0 ){
					//		var data = [0, 1, 2, 3, 4, 5, 6, 7];
					var data = [4, 1, 4, 4,  4, 4, 0, 0, 0, 0, 4];
					tmp = data[Math.floor(Math.random()*data.length)];
					switch(tmp){
						case 1: 
							rotateFunc(1,87,'恭喜您获得了 <em>1</em> 元代金券');
							break;
						case 2:   
							rotateFunc(2,43,'恭喜您获得了 <em>5</em> 元代金券');
							break;
						case 3: 
							rotateFunc(3,134,'恭喜您获得了 <em>10</em> 元代金券');
							break;
						case 4: 
							rotateFunc(4,177,'很遗憾，这次您未抽中奖，继续加油吧');
							break;
						case 5: 
							rotateFunc(5,223,'恭喜您获得了 <em>20</em> 元代金券');
							break;
						case 6: 
							rotateFunc(6,268,'恭喜您获得了 <em>50</em> 元代金券');
							break;
						case 7: 
							rotateFunc(7,316,'恭喜您获得了 <em>30</em> 元代金券');
							break;
						default:
							rotateFunc(0,0,'很遗憾，这次您未抽中奖，继续加油吧');
					}
					rotateCount --;
				}else{
					$resultTxt.html("您的抽奖次数为0，每下一单即可获得一次抽奖机会");
					$result.show();
				}
				
			});
		
			var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
				$rotaryArrow.stopRotate();
				$rotaryArrow.rotate({
					angle: 0,
					duration: 5000,
					animateTo: angle + 1440,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
					callback: function(){
						$resultTxt.html(text);
						$result.show();
					}
				});
			};
		
			$resultBtn.click(function(){
				$result.hide();
			});
		});
	</script>

		

		<%@include file="/common/footer.jsp" %>
	</body>
</html>